<template>
  <div class="app-container">
    <el-form label-width="120px" :rules="rules" :model="hospset" ref="hospset">
      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="hospset.hosname" />
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="hospset.hoscode" />
      </el-form-item>
      <el-form-item label="api地址">
        <el-input v-model="hospset.apiUrl" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="hospset.contactsName" />
      </el-form-item>
      <el-form-item label="电话" prop="contactsPhone">
        <el-input v-model="hospset.contactsPhone" />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate('hospset')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  // 引入调用接口的js文件
  import hospset from '@/api/hospset.js'
  export default {
    data() {
      return {
        saveBtnDisabled: false,
        hospset: {},
        rules: {
          hosname: [
            { required: true, message: '请输入医院名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          contactsPhone: [
            { required: true, message: '请输入联系人电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '请正确输入电话号码11位格式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      saveOrUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveBtnDisabled = true // 防止用户网卡时多次请求保存
            if(!this.hospset.id) {
              // 成功添加
              hospset.addHospital(this.hospset).then(resp => {
                this.$message.success("成功添加")
                // 跳转路由
                this.$router.push({path: '/yygh/hospset/list'})
              }).catch(err => {
                this.$message.error("添加失败")
              })
            }else {
              // 修改
              hospset.update(this.hospset).then(resp => {
                this.$message.success("修改成功!")
                // 跳转路由
                this.$router.push({path: '/yygh/hospset/list'})
              })
            }
          } else {
            this.$message.error('表单验证失败，根据规则重新输入')
            return false;
          }
        });

      }
    },
    created() {
      // 获取此时路由的参数信息===> id
      if(this.$route.params && this.$route.params.id) {
        // 进入if说明可以正常获取回显信息
        let id = this.$route.params.id
        hospset.detail(id).then(resp => {
          this.hospset = resp.data.item
        })
      }
    }
  };
</script>

<style></style>
